<template>
  <div class="page sales-amount">
    <!-- <navbar :title="'龚杜娟销售'"></navbar> -->
    <!-- <div class="section-1">
      <div class="category">业绩品类：美妆面膜</div>

      <sales-amount-item></sales-amount-item>
    </div>-->

    <div class="section-2">
      <!-- <total-sales-amount :number="mySalesDetail.saleMoney"></total-sales-amount> -->
      <div class="goods">
        <div>
          <div>
            <p>{{goodsName}}</p>
            <p>{{goodsSize}}</p>
          </div>
        </div>
        <div class="time" @click="showPopup = true">
          <p>
            <span>{{startDate}}</span>
            <icon name="arrow-down" size="0.8rem" />
          </p>
        </div>
      </div>
      <div class="info">
        <div class="total-price">
          <p>销售额：</p>
          <p class="price">￥{{saleMoney || "0.00"}}</p>
        </div>
        <div class="total-price">
          <p>销售折扣：</p>
          <p class="price">￥{{saleDiscount || "0.00"}}</p>
        </div>
      </div>
      <div class="agent-list">
        <list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          ref="loadList"
        >
          <agent-item
            v-for="(item,index) in salePeopleList"
            :key="index"
            :avatar="item.headImg ? item.headImg : null"
            :type="'show'"
          >
            <div slot="agent-info">
              <p>
                <span>姓名：</span>
                <span>{{item.name}}</span>
              </p>
              <p>
                <span>级别：</span>
                <span>{{item.levelName}}</span>
              </p>
              <p>
                <span>业绩：</span>
                <span class="price">￥{{item.saleMoney}}</span>
              </p>
            </div>
          </agent-item>
        </list>
      </div>
    </div>
    <popup :show="showPopup" @onCancel="onCancel">
      <div>
        <datetime-picker
          v-model="date"
          type="year-month"
          show-toolbar
          :max-date="currentDate"
          :formatter="formatter"
          @confirm="onConfirm"
          @cancel="onCancel"
        />
      </div>
    </popup>
  </div>
</template>

<script>
import navbar from "../components/navbar.vue";
import agentItem from "../components/agent_item.vue";
import salesAmountItem from "../components/sales_amount_item.vue";
import totalSalesAmount from "../components/total_sales_amount.vue";
import { defaultAvatar } from "../service/default_source.js";
import { mapState } from "vuex";
let moment = require("moment");
import popup from "../components/popup.vue";
import { DatetimePicker, Icon, List } from "vant";
import { staticHost } from "../service/HOST";

export default {
  components: {
    navbar,
    agentItem,
    salesAmountItem,
    totalSalesAmount,
    popup,
    DatetimePicker,
    Icon,
    List
  },
  data() {
    return {
      staticHost,
      loading: false,
      finished: false,
      pageNumber: 1,
      pageSize: 10,
      defaultAvatar,
      mySalesDetail: {},
      goodsName: this.$route.query.goodsName,
      goodsSize: this.$route.query.size,
      startDate: this.$route.query.startDate,
      goodsId: this.$route.query.goodsId,
      saleMoney: this.$route.query.saleMoney,
      saleDiscount: this.$route.query.saleDiscount,
      showPopup: false,
      currentDate: new Date(),
      // selectedDate: "",
      date: "",
      salePeopleList: []
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  beforeRouteEnter(to, from, next) {
    next(that => {
      if (from.path != "/my_sales") {
        that.$router.replace("/my_sales");
      }
    });
  },
  mounted() {
    // this.$store.commit("setNavInfo", {
    //   title: this.startDate + " 销售额"
    // });

    // this.selectedDate = moment(this.currentDate).format("YYYY-MM");
    let storeTime = localStorage.getItem("mysales_startDate");
    this.date = storeTime ? moment(storeTime)._d : this.currentDate;

    // this.getMySalesDetail();
    // this.getSalePeople();
  },
  methods: {
    // 获取我的销售数据
    // getMySalesDetail() {
    //   return this.$http
    //     .post(this.$urls.WDXS, {
    //       agentLevel: this.userInfo.agentLevel,
    //       userId: this.userInfo.id,
    //       // tokenId: this.userInfo.id,
    //       startDate: this.startDate
    //     })
    //     .then(res => {
    //       if (res.data.code == 200) {
    //         // if(this.date.indexOf('2020') != -1){
    //         //   res.data.data.curEarn = 10
    //         //   res.data.data.saleMoney = 103
    //         // }
    //         this.mySalesDetail = res.data.data;
    //       }
    //     })
    //     .catch(err => {
    //       console.log("错误：", err);
    //     });
    // },
    // 获取个人销售额列表
    onLoad() {
      return this.$http
        .post(this.$urls.HQGRXS, {
          startDate: this.startDate,
          goodsId: this.goodsId,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          if (res.data.code == 200) {
            this.salePeopleList = this.salePeopleList.concat(res.data.data.rows);

            this.pageNumber++;
            this.loading = false;
          } else if (res.data.code == 300) {
            this.loading = false;
            this.finished = true;
          }
        });
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      }
      return value;
    },
    onConfirm(value) {
      this.showPopup = false;
      this.startDate = moment(value).format("YYYY-MM");
      // localStorage.setItem("mysales_startDate", this.startDate);
      // this.$emit("onConfirm", this.selectedDate);

      this.loading = false;
      this.finished = false;
      this.pageNumber = 1;
      this.salePeopleList = [];

      this.getMySalesDetail();
      // this.getSalePeople();
    },
    onCancel() {
      this.showPopup = false;
    }
  }
};
</script>

<style scoped>
.section-1,
.section-2 {
  /* background-color: #fff; */
  text-align: center;
}

.category {
  padding: 10px;
  text-align: left;
}

.info {
  display: flex;
  background-color: #fff;
  font-size: 0.9rem;
  /* justify-content: space-between; */
}

.info > div {
  width: 49.5%;
}

.info > div:nth-child(2n) {
  border-left: 1px solid #f7f8ff;
}

.goods {
  display: flex;
  text-align: left;
  justify-content: space-between;
  background-color: #fff;
  border-bottom: 1px solid #f7f8ff;
}

.goods > div:first-child {
  padding: 10px 15px;
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-list {
  margin-top: 5px;
  max-height: calc(100% - 84px);
}

.total-price {
  display: flex;
  padding: 10px 15px;
}

.price {
  color: var(--money-up);
  font-weight: bold;
}

.time {
  border-top: 1px solid var(--line-between-color);
  padding: 10px;
  display: flex;
  justify-content: center;
}

.time p {
  padding-left: calc(0.8rem + 3px);
  display: flex;
  align-items: center;
}

.time p span {
  padding-right: 3px;
}
</style>

<style>
.sales-amount .total-sales-amount {
  margin-top: 0;
}
</style>